<template>
    <view class="shop-card-main">
        <view class="goods-list">
            <view class="goods-item" v-for="(item, index) in props.goodsList" :key="index" @click="clickShopCard(item)">
                <view class="goods-img">
                    <image class="img" :src="item?.goodsImg || defaultImg" @error="imageError(index)"></image>
                </view>
                <view class="goods-info">
                    <view class="goods-info-item">
                        <view class="goods-info-name">
                            <div v-if="[3, 4, 5].includes(orderType)" class="sign">拼</div>
                            <text v-if="item.activityProgress === 1" class="full_decre_text">满减</text>
                            {{ item.goodsName }}
                        </view>
                        <view class="goods-info-price" v-if="orderType === 6">
                            {{ floatDivide(item.goodPoints, 100) }}积分
                        </view>
                        <view v-else class="goods-info-price">￥{{ floatDivide(item.goodsPrice, 100) }}</view>
                    </view>
                    <view class="goods-info-item goods-info-skus">
                        <view class="goods-info-sku">{{ getSpecValue(item) }}</view>
                        <view class="goods-info-num">x {{ props.refundNum ? props.refundNum : item.buyNum }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { floatDivide, getImgOssUrl } from '@/commons/utils.js';

const emits = defineEmits(['handleShopCard']);

const props = defineProps({
    type: {
        type: String,
        default: '1'
    },
    orderType: {
        type: [Number, String],
        default: '1'
    },
    goodsList: {
        type: Array,
        default: () => {}
    },
    refundNum: {
        type: [Number, String],
        default: ''
    }
});

const defaultImg = ref(getImgOssUrl('/ui-prod-2.0.0/errorImg.png'));

const clickShopCard = val => {
    emits('handleShopCard', val);
};
const getSpecValue = val => {
    let ary = [];
    let str = '';
    val.skuExtInfo &&
        val.skuExtInfo.map(el => {
            // ary.push(`${el.keyAttributeName}：${el.attributeValue}`);
            ary.push(el.attributeValue);
        });
    str = ary.join(';');
    return str;
};

const imageError = e => {};
</script>
<style lang="scss" scoped>
.shop-card-main {
    .goods-list {
        .goods-item {
            display: flex;
            margin-bottom: 18rpx;
            background: #ffffff;
            .goods-img {
                width: 145rpx;
                height: 145rpx;
                border-radius: 7rpx;
                overflow: hidden;
                .img {
                    width: 100%;
                    height: 100%;
                }
            }
            .goods-info {
                margin-left: 18rpx;
                flex: 1;
                .goods-info-item {
                    display: flex;
                    justify-content: space-between;
                    .goods-info-name {
                        margin-right: 30rpx;
                        font-size: 25rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #33302d;
                        max-width: 408rpx;
                        display: -webkit-box;
                        overflow: hidden;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        line-height: 30rpx;
                        height: 60rpx;
                        .sign {
                            width: 29rpx;
                            height: 29rpx;
                            font-size: 22rpx;
                            font-family: PingFangSC-Medium, PingFang SC;
                            font-weight: 500;
                            color: #ffffff;
                            line-height: 29rpx;
                            display: inline-block;
                            background: #fe292b;
                            border-radius: 4rpx;
                            text-align: center;
                        }
                        .full_decre_text {
                            padding: 0 4rpx;
                            height: 29rpx;
                            background: #fe292b;
                            border-radius: 4rpx;
                            font-size: 22rpx;
                            color: #ffffff;
                            line-height: 29px;
                            text-align: center;
                        }
                    }
                    .goods-info-price {
                        font-size: 29rpx;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                    }
                }
                .goods-info-skus {
                    margin-top: 22rpx;
                    color: #999999;
                    font-size: 24rpx;
                    .goods-info-sku {
                        margin-right: 30rpx;
                        max-width: 408rpx;
                    }
                    .goods-info-num {
                        text-align: right;
                    }
                }
            }
        }
        .goods-item:nth-last-child(1) {
            margin-bottom: 0;
        }
    }
}
</style>
